<template>
	<view class="container-eq-detail" v-if="deviceInfo">
		<view class="topDetail">
			<view class="">
				<image style="width: 100%;height: 526rpx;" src="@/static/topBgc.png" mode=""></image>
			</view>
			<view class="topDetail-box">
				<view class="top" style="display: flex;">
					<view class="vnodeId">
						节点id: <text style="font-size: 26rpx;color: #232323;">{{deviceInfo.info.deviceid}}</text>
					</view>
					<view class="copy" @click="copy(deviceInfo.info.deviceid)">
						复制
					</view>
				</view>
				<view class="income flex">
					<view class="lt">
						<text class="text">本月收益</text>
						<view class="price">￥{{deviceInfo.info.income}}</view>
					</view>
					<!-- <view class="rt">
						<view class="text">故障通知</view>
						<u-switch v-model="value" @change="change"></u-switch>
					</view> -->
				</view>
				<view class="content flex-between">
					<view class="">
						<text>绑定时间</text>
						<view class="value">{{deviceInfo.info.bindtime}}</view>
					</view>
					<view class="">
						<text>网络( <text
								:style="{color:deviceInfo.info.online_status=='在线'?'#64d35d':''}">{{deviceInfo.info.online_status}}</text>
							)</text>
						<!-- <view class="value monitor" @click="$fun.jump(`/pageC/equipmentDetail1`)">监控</view> -->
					</view>
					<view class="">
						<text>当前阶段</text>
						<view class="value">{{deviceInfo.info.state}}</view>
					</view>
				</view>
				<view class="bottom flex">
					<view class="notes">
						<text style="white-space: nowrap;">备注：{{deviceInfo.info.remark}}</text>
					</view>
					<view class="update">
						<text @tap="editRemark">修改</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="" style="margin-bottom: 20rpx;">
				<u-subsection mode="subsection" activeColor="#1D93FF" :list="list" :current="current"
					@change="sectionChange" fontSize="16"></u-subsection>
			</view>
			<!-- 收益 -->
			<view class="revenue-details" v-if="current===0">
				<view class="title flex-between">
					<text class="lt">节点收益详情</text>
					<text class="rt">仅展示近60天账单</text>
				</view>
				<view class="revenue-details-list">
					<view class="header flex-align">
						<text class="date">日期</text>
						<text class="income">收益(元)</text>
					</view>
					<scroll-view scroll-y="true" style="height: 700rpx;">
						<view class="main flex-align" v-for="(item ,index) in deviceInfo.sixDayList" :key="index">
							<view style="flex: 1;" class="date">
								<view>{{item.date}}</view>
								<view>贡献收益 {{item.settle_money}}元({{item.bandwidth}}Gbps计费)</view>
							</view>
							<view class="income" style="width: 200rpx; text-align: center;">
								<text>{{item.settle_money}}</text>
								<text @click="handleSla(item)" v-if="item.sla!=0" style="margin-left: 10rpx;"><u-icon
										name="info-circle" color="red" size="16"></u-icon></text>
							</view>
						</view>
						<u-divider text="没有更多数据了~"></u-divider>
					</scroll-view>

				</view>
			</view>
			<!-- 昨日质量 -->
			<view class="quality" v-if="current===1">
				<view class="box1">
					<u-cell-group :border="false">
						<!-- <u-cell title="报告时间" :value="deviceInfo.quality" titleStyle="color: #8a959e;"></u-cell> -->
						<u-cell title="收益" :value="BindQuality.income" titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="设备诊断" :value="BindQuality.result" titleStyle="color: #8a959e;"></u-cell>
					</u-cell-group>
				</view>
				<view class="">硬件质量</view>
				<view class="box1">
					<view class="revenue-details-list">
						<view class="header flex-align">
							<text class="income">磁盘名</text>
							<text class="income">类型</text>
							<text class="income">IOPS</text>
							<text class="income">读延迟</text>
							<text class="income">写延迟</text>
						</view>
						<view class="main flex-align" v-for="(item ,index) in BindQuality.diskInfo" :key="index"
							style="font-size: 24rpx;">
							<view class="item">{{item.diskName}}</view>
							<view class="item">{{item.diskType}}</view>
							<view class="item">{{item.diskIops.value}}</view>
							<view class="item">{{item.diskReadDelay.value}} | {{item.diskReadDelay.result}}</view>
							<view class="item">{{item.diskWriteDelay.value}} | {{item.diskReadDelay.result}}</view>
						</view>
					</view>
					<u-cell-group :border="false">
						<u-cell title="CPU利用率" :value="BindQuality.cpuUsage.value + ' | ' + BindQuality.cpuUsage.result"
							titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="内存利用率" :value="BindQuality.memUsage.value + ' | ' + BindQuality.memUsage.result"
							titleStyle="color: #8a959e;"></u-cell>
					</u-cell-group>
				</view>
				<view class="">网络质量</view>
				<view class="box1">
					<u-cell-group :border="false">
						<u-cell title="在线率"
							:value="BindQuality.onlineRate.value + ' | ' + BindQuality.onlineRate.result"
							titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="NAT类型" :value="BindQuality.nat.value + ' | ' + BindQuality.nat.result"
							titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="最大丢包率" :value="BindQuality.maxLoss.value + ' | ' + BindQuality.maxLoss.result"
							titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="最大时延" :value="BindQuality.maxDelay.value + ' | ' + BindQuality.maxDelay.result"
							titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="压测满意度" :value="BindQuality.testSat.value + ' | ' + BindQuality.testSat.result"
							titleStyle="color: #8a959e;"></u-cell>
					</u-cell-group>
				</view>
			</view>
			<!-- 网络信息 -->
			<view class="network" v-if="current===2">
				<u-cell-group :border="false">
					<u-cell title="IP" :value="BindNetwork.ip" titleStyle="color: #8a959e;"></u-cell>
					<u-cell title="运营商" :value="BindNetwork.isp" titleStyle="color: #8a959e;"></u-cell>
					<u-cell title="省市" :value="BindNetwork.city" titleStyle="color: #8a959e;"></u-cell>
					<u-cell title="管理线路" isLink
						:url="`/pageC/netCard/netCard?ids=${ids}&type=${BindNetwork.diallingtype}`"
						rightIconStyle="color:#000;" titleStyle="color: #8a959e;">
						<view class="" slot="value" style="fontWeight: 600;"
							v-if="BindNetwork.name&&BindNetwork.isManager">
							<text>网卡：{{BindNetwork.name}}</text>
							<text>速率：{{BindNetwork.speed}}</text>
							<view class="">
								IP：{{BindNetwork.lineip}}
							</view>
						</view>
						<view class="" slot="value" style="font-size: 36rpx;fontWeight: 600;color: #1D93FF;" v-else>
							<text>配置管理线路</text>
						</view>
					</u-cell>
					<!-- <u-cell title="管理线路" rightIconStyle="color:#000;" titleStyle="color: #8a959e;" v-else></u-cell> -->
					<u-cell title="网络类型" :value="BindNetwork.diallingtype" titleStyle="color: #8a959e;"></u-cell>
					<u-cell title="上网线路" v-if="BindNetwork.diallingtype ==='固定公网多IP'" isLink
						rightIconStyle="color:#000;" :value="BindNetwork.ip" titleStyle="color: #8a959e;"
						:url="'/pageC/dialResult1/dialResult1?ids='+ids">
						<view class="" slot="value">
							<text style="color: #1D93FF;">配置{{BindNetwork.allLineV4}}条|</text>
							<text style="color: red;">连通{{BindNetwork.sucLineV4}}条</text>
						</view>
					</u-cell>
					<u-cell title="上网线路" v-else isLink rightIconStyle="color:#000;" :value="BindNetwork.ip"
						titleStyle="color: #8a959e;"
						:url="BindNetwork.isManager!==0?'/pageC/dialResult2/dialResult2?ids='+ids:''">
						<view class="" slot="value" v-if="BindNetwork.isManager!==0">
							<text style="color: #1D93FF;">上网{{BindNetwork.allLineV4}}条|</text>
							<text
								style="color: red;">拨通{{BindNetwork.sucLineV4}}条|联网{{BindNetwork.networkLineV4}}条</text>
						</view>
						<view class="" slot="value" v-else>
							<text style="font-size: 34rpx;fontWeight: 600;color: #8a959e;">请先配置管理线路</text>
						</view>
					</u-cell>
					<u-cell title="上报带宽" :value="BindNetwork.up_bandwidth_per_line"
						titleStyle="color: #8a959e;"></u-cell>
					<u-cell title="测试带宽" titleStyle="color: #8a959e;" isLink
						:url="'/pageC/testResult/testResult?ids='+ids">
						<view class="" slot="value">
							<text style="color: #1D93FF;">详情</text>
						</view>
					</u-cell>
					<!-- <u-cell title="测试日期" :value="BindNetwork.ip" titleStyle="color: #8a959e;"></u-cell> -->
					<!-- <u-cell title="是否IDC节点" :value="deviceInfo.networkInfo.ip" titleStyle="color: #8a959e;"></u-cell> -->
				</u-cell-group>
			</view>
			<!-- 硬件信息 -->
			<view class="hardware" v-if="current===3">
				<view class="box1">
					<u-cell-group :border="false">
						<u-cell title="镜像版本" :value="BindInfo.image_version" titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="设备类型" :value="BindInfo.device_type" titleStyle="color: #8a959e;"></u-cell>
					</u-cell-group>
				</view>
				<view class="title">
					硬盘
				</view>
				<view class="box1">
					<view class="header flex-align">
						<text class="income">名称</text>
						<text class="income">空间大小(T)</text>
						<text class="income">类型</text>
					</view>
					<!-- <scroll-view scroll-y="true" style="height: 500rpx;"> -->
					<view class="main flex-align" v-for="(item,index) in BindInfo.bind_disk" :key="index">
						<text class="income">{{item.disk_id}}</text>
						<text class="income">{{item.disk_size}}</text>
						<text class="income">{{item.disk_media}}</text>
					</view>
					<!-- </scroll-view> -->
				</view>
				<view class="title">
					CPU
				</view>
				<view class="box1">
					<u-cell-group :border="false">
						<u-cell title="型号" :value="BindInfo.cpu_type" titleStyle="color: #8a959e;width:100rpx"></u-cell>
						<u-cell title="核数" :value="BindInfo.cpu_num" titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="主频" :value="BindInfo.cpu_frequency" titleStyle="color: #8a959e;"></u-cell>
					</u-cell-group>
				</view>
				<view class="title">
					内存
				</view>
				<view class="box1">
					<u-cell-group :border="false">
						<u-cell title="型号" :value="BindInfo.memory_type" titleStyle="color: #8a959e;"></u-cell>
						<u-cell title="容量" :value="BindInfo.memory_size" titleStyle="color: #8a959e;"></u-cell>
					</u-cell-group>
				</view>
			</view>
		</view>
		<u-modal :show="slaShow" title="违规扣费通知" closeOnClickOverlay @confirm="slaShow = false" @close="slaShow = false">
			<view style="color: #8a959e;">
				<view class="">扣除原因：{{contents.slareason}}</view>
				<view class="">扣费金额：{{contents.sla}}</view>
			</view>
		</u-modal>
		<u-modal :show="isRemark" title="备注修改" showCancelButton closeOnClickOverlay @confirm="confirmRemark"
			@close="closeRemark" @cancel="closeRemark">
			<view class="slot-content" style="width: 100%;">
				<u--input placeholder="请输入内容" border="surround" v-model="remark"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	export default {
		components: {},
		data() {
			return {
				value: true,
				list: ['收益', '昨日质量', '网络信息', '硬件信息'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 0,
				ids: null,
				deviceInfo: null,
				slaShow: false,
				contents: {
					slareason: '',
					sla: '',
				},
				isRemark: false,
				remark: '',
				BindQuality: null,
				BindNetwork: null,
				BindInfo: null,
			};
		},
		watch: {

		},
		onLoad(option) {
			this.ids = option.ids
			this.getBindInfo()
		},

		methods: {
			// 取消修改备注
			closeRemark() {
				this.isRemark = false
				this.remark = this.deviceInfo.info.remark
			},
			// 确认修改备注
			async confirmRemark() {
				const res = await this.$fun.ajax.post('bind/updateRemark', {
					ids: this.ids,
					remark: this.remark
				})
				if (res.code == 1) {
					this.deviceInfo.info.remark = this.remark
				}

				this.isRemark = false
			},
			// 修改设备描述
			editRemark() {
				this.isRemark = true
			},
			handleSla({
				sla,
				slareason
			}) {
				this.slaShow = true
				this.contents = {
					sla: sla,
					slareason: slareason,
				}
				console.log(this.contents);
			},
			// 获取设备信息
			async getBindInfo() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const res = await this.$fun.ajax.post('bind/getBindIncome', {
					ids: this.ids
				})
				uni.hideLoading()
				this.deviceInfo = res.data
				this.remark = this.deviceInfo.info.remark
			},
			async sectionChange(index) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				if (index === 0) {
					const res = await this.$fun.ajax.post('bind/getBindIncome', {
						ids: this.ids
					})
					this.deviceInfo = res.data
					this.remark = this.deviceInfo.info.remark
				} else if (index === 1) {
					const res = await this.$fun.ajax.post('bind/getBindQuality', {
						ids: this.ids
					})
					this.BindQuality = res.data
				} else if (index === 2) {
					const res = await this.$fun.ajax.post('bind/getBindNetwork', {
						ids: this.ids
					})
					this.BindNetwork = res.data
				} else {
					const res = await this.$fun.ajax.post('bind/getBindInfo', {
						ids: this.ids
					})
					this.BindInfo = res.data
				}
				uni.hideLoading()
				this.current = index;
			},
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f5f9ff;
	}

	.container-eq-detail {
		padding-bottom: 20rpx;

		.topDetail {
			position: relative;

			.topDetail-box {
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				right: 30rpx;
				z-index: 10;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				min-height: 400rpx;

				.top {
					border-bottom: 1rpx solid #d4d4d4;
					color: #9e9e9e;

					.vnodeId {
						margin-bottom: 15rpx;
					}

					.copy {
						color: $base-color;
					}
				}

				.income {
					padding: 20rpx 0;

					.lt {
						.text {
							font-size: 34rpx;
							font-weight: 600;
							color: #8a959e;
							line-height: 2;
						}

						.price {
							font-size: 50rpx;
							font-weight: 600;
						}
					}

					.rt {
						border-left: 1rpx solid #d4d4d4;
						padding: 0 30rpx;

						.text {
							font-size: 34rpx;
							font-weight: 600;
							color: #8a959e;
							line-height: 2;
							margin-bottom: 10rpx;
						}
					}
				}

				.content {
					line-height: 1.5;
					padding: 20rpx 0 40rpx 0;

					text {
						color: #8a959e;
					}

					.value {
						font-size: 27rpx;
					}

					.monitor {
						background-color: #2e5bff;
						border-radius: 10rpx;
						text-align: center;
						color: #fff;
						padding: 5rpx 0;
					}
				}

				.bottom {
					.notes {
						overflow: hidden;
						flex: 1;
						margin-right: 30rpx;

						text {
							color: #8a959e;
						}
					}

					.update {
						margin-right: 10rpx;

						text {
							color: $base-color;
						}
					}
				}
			}
		}

		.content {
			padding: 0 30rpx;

			.revenue-details-list {
				.header {
					background-color: #eaeeff;
					padding: 30rpx 0;
					border-radius: 30rpx 30rpx 0 0;
					color: #232323;

					.date {
						text-align: center;
						flex: 1;
					}

					.income {
						width: 200rpx;
						text-align: center;
					}
				}

				.main {
					background-color: #fff;
					padding: 15rpx;
					border-bottom: 1rpx solid #d4d4d4;

					.date {
						color: #8a959e;
					}

					.income {
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.item {
						width: 20%;
					}
				}
			}

			.revenue-details {
				.title {
					padding: 30rpx 0;

					.lt {
						font-size: 35rpx;
						font-weight: 600;
					}

					.rt {
						font-size: 26rpx;
						color: #8a959e;
					}
				}


			}

			.network {
				background-color: #fff;

				::v-deep .u-cell__value {
					font-size: 32rpx;
					font-weight: 600;
					color: #282828;
				}
			}

			.quality {

				.box1 {
					background-color: #fff;
					margin: 20rpx 0;
				}
			}

			.hardware {
				::v-deep .u-cell__value {
					font-size: 32rpx;
					font-weight: 600;
					color: #282828;
				}

				.title {
					font-size: 36rpx;
					font-weight: 600;
				}

				.box1 {
					background-color: #fff;
					margin: 20rpx 0;

					.header {
						background-color: #eaeeff;
						padding: 30rpx 20rpx;
						border-radius: 30rpx 30rpx 0 0;


						.income {
							width: 33%;
							text-align: center;
						}
					}

					.main {
						padding: 30rpx 20rpx;

						.income {
							width: 33%;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>